<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .top {
            height: 168px;
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 0px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="top" id="topPart">
        <img id="pic" src="images/top.png" alt="" />
    </div>

    <div class="nav" id="navBar">
        <img src="images/nav.png" alt="" />
    </div>

    <div class="main" id="mainPart">
        <img src="images/main.png" alt="" />
    </div>

    <script>
        // 页面滚动，滚动top的高度后，就实现导航栏固定，否则导航栏不固定

        /*
            思路分析

            1. 页面增加滚动事件：window.onscroll
            2. 滚动事件处理
            2.1 获取页面滚动高度：window.pageYOffset
            2.2 获取top的高度
            2.3 判定：滚动的距离与top高度大小
            2.3.1 如果大于：导航栏固定；nav.classList.add('fixed');
            2.3.2 如果小于等于：导航栏不固定：nav.classList.remove('fixed');
        */
        let a = document.getElementById('mainPart');
        let b = document.getElementById('navBar');
        // 先拿到mainPart的本身的marginTop值
        let mainMargin = parseInt(getComputedStyle(a)['marginTop']);
        console.log(mainMargin);
        // console.log(b.offsetHeight);


        // 1. 页面增加滚动事件：window.onscroll
        window.onscroll = function () {
            // 2. 滚动事件处理
            // 2.1 获取页面滚动高度：window.pageYOffset
            // 2.2 获取top的高度
            let topPart = document.getElementById('topPart');
            let navBar = document.getElementById('navBar');
            let mainPart = document.getElementById('mainPart');

            // console.log(topPart.offsetHeight, navBar.offsetHeight);
            // 2.3 判定：滚动的距离与top高度大小
            if (window.pageYOffset > topPart.offsetHeight) {
                // 2.3.1 如果大于：导航栏固定；nav.classList.add('fixed');
                navBar.classList.add('fixed');
                // 细节：navBar脱标后，没有高度，导致main会顶上去
                // 解决方案：给main增加一个marginTop属性，值是自己原来的值 + navBar的高度
                mainPart.style.marginTop = mainMargin + navBar.offsetHeight + 'px';
            } else {
                // 2.3.2 如果小于等于：导航栏不固定：nav.classList.remove('fixed');
                navBar.classList.remove('fixed');

                // 不固定导航：减去导航栏的高度（回到原始状态）
                mainPart.style.marginTop = mainMargin + 'px';
            }


        };

    </script>
</body>

</html>